<style>
</style>
<template>
  <div id="centre">
    <h1>用户管理</h1>
    <br>
    <div>
        <ul class="all">
            <li>
                <ui class="select">
                <li><el-button type="success" round @click="selectByName">查询</el-button></li>
                <li><el-input placeholder="请输入内容" v-model="username" clearable class="input"></el-input></li>
                </ui>
            </li>
            <li>
                <ui class="btn">
                <li><el-button type="warning" round @click="renew">刷新</el-button></li>
                <li><el-button type="warning" round @click="addUser">添加</el-button></li>
                </ui>
            </li>
        </ul>
        

    </div>
    <br>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="0" label="ID" width="50"></el-table-column>
        <el-table-column prop="1" label="用户名" width="100"></el-table-column>
        <el-table-column prop="2" label="密码" width="100"></el-table-column>
        <el-table-column prop="3" label="API-Key" width="330"></el-table-column>
        <el-table-column prop="4" label="权限" width="50"></el-table-column>
        <el-table-column prop="5" label="access-Id" width="100"></el-table-column>
        <el-table-column prop="6" label="邮箱" width="180"></el-table-column>
        <el-table-column prop="7" label="电话" width="180"></el-table-column>
        <el-table-column label="修改" width="100">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="changeData(scope.row)">修改</el-button>
            </template>
            
        </el-table-column>
        <el-table-column label="删除" width="100">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
            </template>
            
        </el-table-column>
    </el-table>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="datas[1]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="datas[2]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="API-KEY" :label-width="formLabelWidth">
            <el-input v-model="datas[3]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限" :label-width="formLabelWidth">
            <el-input v-model="datas[4]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="access-Id" :label-width="formLabelWidth">
            <el-input v-model="datas[5]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="datas[6]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="datas[7]" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="change">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="添加" :visible.sync="dialogFormVisibleT">
        <el-form :model="form">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="newInfo[1]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="newInfo[2]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="API-KEY" :label-width="formLabelWidth">
            <el-input v-model="newInfo[3]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限" :label-width="formLabelWidth">
            <el-input v-model="newInfo[4]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="access-Id" :label-width="formLabelWidth">
            <el-input v-model="newInfo[5]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="newInfo[6]" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="newInfo[7]" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleT = false">取 消</el-button>
          <el-button type="primary" @click="addUserSure">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
    export default {
      name: 'center',
      data () {
        return {
            tableData:[
                {
                    id:"",
                    username:"",
                    password:"",
                    apiKey:"",
                    user:"",
                    accessId:"",
                    email:"",
                    phone:""
                }
            ],
            newInfo:[

            ],
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogFormVisibleT:false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            datas:[],
            formLabelWidth: '120px',
            username:""
        }
      },
      mounted () {//页面创建完成后立即调用
        this.selectAll()
      },
      methods: {//用时才用
          selectAll(){
            this.axios({
                method : 'POST',
                url : 'http://192.168.1.7:5001/selectAll',
                data : {
                    
                },
                headers:{
                        'Content-Type': 'application/json' //以json格式传输
                    }
                })
                .then((res)=>{
                    this.tableData= res.data
                })
            },
            del(data){
                console.log(data[0])
                this.datas = data
                if(confirm("确定要删除这条信息吗")){
                    this.axios({
                    method : 'POST',
                    url : 'http://192.168.1.7:5001/deleteById',
                    data : {
                        Id:this.datas[0]
                    },
                    headers:{
                            'Content-Type': 'application/json' //以json格式传输
                        }
                    })
                    .then((res)=>{
                        console.log(res.data)
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                         });
                    })
                    this.selectAll()
                }
                else{
                    this.$message({
                         message: '取消成功',
                         type: 'success'
                     });
                }
            },
            changeData(data){
                this.datas = data
                this.dialogFormVisible = true
            },
            change(){
                this.axios({
                method : 'POST',
                url : 'http://192.168.1.7:5001/changeOneInfo',
                data : {
                    id:this.datas[0],
                    name:this.datas[1],
                    pwd:this.datas[2],
                    apiKey:this.datas[3],
                    status:this.datas[4],
                    accessId:this.datas[5],
                    email:this.datas[6],
                    phone:this.datas[7]
                },
                headers:{
                        'Content-Type': 'application/json' //以json格式传输
                    }
                })
                .then((res)=>{
                    this.dialogFormVisible = false
                    console.log(res.data)
                    this.$message({
                         message: '修改成功',
                         type: 'success'
                     });
                })
            },
            selectByName(){
                console.log(this.username)
                this.axios({
                method : 'POST',
                url : 'http://192.168.1.7:5001/selectByName',
                data : {
                    name:this.username
                },
                headers:{
                        'Content-Type': 'application/json' //以json格式传输
                    }
                })
                .then((res)=>{
                    console.log(res.data)
                    this.tableData=res.data
                })
            },
            addUser(){
                this.dialogFormVisibleT = true
                console.log(111111111)
            },
            renew(){
                this.selectAll();
            },
            addUserSure(){
                console.log(this.newInfo)
                this.axios({
                method : 'POST',
                url : 'http://192.168.1.7:5001/addNew',
                data : {
                    name:this.newInfo[1],
                    pwd:this.newInfo[2],
                    apiKey:this.newInfo[3],
                    statue:this.newInfo[4],
                    accessId:this.newInfo[5],
                    email:this.newInfo[6],
                    phone:this.newInfo[7]
                },
                headers:{
                        'Content-Type': 'application/json' //以json格式传输
                    }
                })
                .then((res)=>{
                    console.log(res.data)
                    this.selectAll()
                    this.dialogFormVisibleT = false
                })
            }
        }
    }
</script>
<style scoped>
 .input{
    width: 350px;
 }
 .select li{
    float: right;
    list-style-type: none;
 }
 .btn{
    position: absolute;
    left: 250px;
 }
 .btn li{
    float: left;
    list-style-type: none;
 }
 .all li{
    float: right;
    list-style-type: none;
 }
</style>
